Semantic classes
Backgrounds · App, card, metrics and heatmaps
bg-positive
--emerald-50
bg-best
--emerald-400
bg-warning
--orange-50
bg-negative
--rose-50
bg-worst
--rose-40
bg-neutral
--slate-100
bg-app
--slate-50
bg-card
--white
Labels · Texts
label-positive
--emerald-600
label-best
--white
label-warning
--orange-600
label-negative
--rose-600
label-worst
--white
label-wellbeing
--emerald-600
label-stress
--orange-600
label-enps
--violet-600
label-dark
--slate-800
label-light
--slate-600
label-placeholder
--slate-400
Fills · Charts
fill-neutral
--slate-200
fill-wellbeing
--emerald-600
fill-stress
--orange-600
fill-enps
--violet-600
Controls · Checkboxes, buttons, radio buttons, etc.
control-primary-default
--slate-800
control-primary-hover
--slate-600
control-secondary-default
--white
control-secondary-hover
--slate-50
Borders
border-card
--slate-200
border-neutral
--slate-400
border-positive
--emerald-400
border-warning
--orange-400
border-negative
--rose-400